<template>
  <UiFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <div class="flex">
      <el-select v-model="formDataModel" size="mini">
        <el-option v-for="item in printersOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <label
        class="flex flex-none justify-end items-center text-right text-xs text-gray-500 pr-[10px] pl-1"
        :style="{
          width: `${info.extension.paperLabelWidth.value}px`,
        }"
      >
        {{ info.extension.paperLabel.value }}
      </label>
      <el-select v-model="formDataModel2" size="mini">
        <el-option v-for="item in printerPapersOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
  </UiFormItem>
</template>
<script>
  import { defineComponent } from 'vue'
  import cloneDeep from 'lodash/cloneDeep'
  import { getComponentDefaulType } from '@ve/utils/utils'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  import { webapp_ws_fun_Printers, webapp_ws_fun_PrinterPapers } from '@ve/utils/print/grwebapp'
  export default defineComponent({
    name: 'UiSelectPrinters',
    components: {},
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {
        printersOptions: [],
        printerPapersOptions: [],
        lastNewval: {},
      }
    },
    computed: {
      formDataModel2: {
        get() {
          let _model = cloneDeep(this.getFormData(false, this.info.extension.modelPaper.value))
          _model = _model === undefined ? getComponentDefaulType(this.info.type) : _model
          return _model
        },
        set(value) {
          let _model = this.getFormData(true)

          _model[this.info.extension.modelPaper.value] = value
        },
      },
    },
    watch: {
      formDataModel(val) {
        console.log('formDataModel===', val)
        if (val) {
          this.handleChange(val)
        }
      },
    },
    created() {},
    mounted() {
      this.init()
    },
    methods: {
      setData(event) {
        let message = JSON.parse(event.data)
        //打印机列表
        if (message.type == 'fun') {
          switch (message.fun) {
            case 'Printers':
              this.onFunPrinters(message)
              break
            case 'PrinterPapers':
              if (message.error) return
              this.onFunPrinterPapers(message)
              break
          }
        }
      },
      init() {
        if (!this.hasPreview) {
          console.log('预览模式不运行 打印机')
          return
        }
        webapp_ws_fun_Printers()
        // 新的
        if (window.webapp_onmessage) {
          window.webapp_onmessage = (event) => {
            console.log('window.webapp_onmessage', window.webapp_onmessage)
            this.$store.dispatch('diyPrint/setMessage', event)
            this.setData(event)
          }
        }
        //原来的
        // let ws = webapp_ws_fun_Printers()
        // ws.onmessage = (event) => {
        //   //打印机列表
        //   let message = JSON.parse(event.data)
        //   console.log('打印机列表', message)

        //   if (message.type == 'fun') {
        //     switch (message.fun) {
        //       case 'Printers':
        //         this.onFunPrinters(message)
        //         break
        //       case 'PrinterPapers':
        //         if (message.error) return
        //         this.onFunPrinterPapers(message)
        //         break
        //     }
        //   }
        // }
      },
      //获取打印机
      onFunPrinters(message) {
        let _printersOptions = []
        //原来的
        // message.printers.forEach((v) => {
        //   _printersOptions.push({
        //     value: v.name,
        //     label: v.name,
        //   })
        // })
        //新的
        message.result.forEach((v) => {
          _printersOptions.push({
            value: v,
            label: v,
          })
        })
        this.printersOptions = _printersOptions
      },
      //获取纸张
      onFunPrinterPapers(message) {
        console.log('onFunPrinterPapers message', message)
        let _printerPapersOptions = []
        // message.papers.forEach((v) => {
        //   _printerPapersOptions.push({
        //     value: v.name,
        //     label: v.name,
        //   })
        // })
        //新的
        message.result.forEach((v) => {
          _printerPapersOptions.push({
            value: v,
            label: v,
          })
        })
        this.printerPapersOptions = _printerPapersOptions
      },
      handleChange(e) {
        webapp_ws_fun_PrinterPapers(e)
      },
    },
  })
</script>
<style lang="scss" scoped></style>
